<template>
  <div class="container">
    <DoingItem :doingList="doingList"></DoingItem>
    <DoneItem :doneList="doneList"></DoneItem>
  </div>
</template>

<script>
import DoingItem from "./DoingItem.vue";
import DoneItem from "./DoneItem.vue";

export default {
  props: ["doingList", "doneList"],
  components: { DoingItem, DoneItem },
  data() {
    return {};
  },
};
</script>

<style>
/* 内容 */
.doing,
.done {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}
.main {
  height: 40px;
  overflow: hidden;
  margin: 20px 0;
}
.main button {
  padding: 5px;
  margin: 6px 0 0 16px;
  background-color: #ff7500;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 4px 3px 4px 0px #d38812;
}
.title {
  font: bolder 26px 楷书, sans-serif;
  line-height: 40px;
  float: left;
}
.demo {
  width: 25px;
  height: 25px;
  float: right;
  margin: 5px 5px 0 0;
  background-color: #f0f0f0;
  border-radius: 50%;
}
.demo span {
  display: block;
  font-size: 23px;
  text-align: center;
}
.doingItem,
.doneItem {
  height: 40px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  border-left: 5px solid #aa0000;
}
.doneItem {
  opacity: 0.5;
  border-left: 5px solid #005500;
}
.choose {
  width: 35px;
  height: 25px;
  float: left;
  margin-top: 7px;
}
.content {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: 6px;
}
.content span {
  display: block;
  width: 410px;
}
.content input {
  width: 410px;
  margin-top: -5px;
  font-size: 16px;
}
.btn {
  float: right;
  margin: 7px 13px 0 0;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  border: none;
  display: none;
}
.doingItem:hover .btn {
  display: initial;
}
.doneItem:hover .btn {
  display: initial;
}
.del {
  background-color: rgb(249 0 0);
}
.edit {
  background-color: rgb(52 132 215);
}
</style>